<template>
  <div class="login">
    <div class="center">
      <div class="login-logo">
        <div class="f-name">安徽中设国际会展集团有限公司</div>
        <div class="s-name">ZHONGSHE international EXHIBITION GROUP</div>
      </div>
      <div class="login-content">
        <div class="right"></div>
        <div class="left">
          <div class="title">用户名登录</div>
          <p :class="!accountFlag?'':'p-line'">
            <Input
              placeholder="请输入用户名"
              :border="false"
              size="large"
              v-model.trim="username"
              :maxlength="18"
              @on-focus="checkaccountChange()"
              @on-blur="checkaccountChange2()"
            >
              <div slot="prefix" class="prefix">
                <Icon type="md-person" :style="{'color':!accountFlag?'#999':'#4c92f4'}" />
                <div :class="!accountFlag?'line':'blueLine'">|</div>
              </div>
            </Input>
          </p>
          <p :class="!passwordFlag?'':'p-line'">
            <Input
              placeholder="请输入密码"
              v-model.trim="password"
              type="password"
              :border="false"
              size="large"
              :maxlength="18"
              @on-focus="checkPassChange()"
              @on-blur="checkPassChange2()"
            >
              <div slot="prefix" class="prefix">
                <Icon type="md-lock" :style="{'color':!passwordFlag?'#999':'#4c92f4'}" />
                <div :class="!passwordFlag?'line':'blueLine'">|</div>
              </div>
            </Input>
          </p>
          <Button
            style="margin-top:20px"
            type="primary"
            :loading="loading"
            @click="loginAccount"
            long
            size="large"
          >登录</Button>
        </div>
      </div>
    </div>

    <!-- <footer>Copyright © 2020 京ICP备18063717号-3</footer> -->
  </div>
</template>

<script>
import { login } from "../api/login";
import {constantRouterMap,asyncRouteMap} from '../router/index'
export default {
  name: "login",
  data() {
    return {
      loading: false,
      username: "",
      password: "",
      passwordFlag: false,
      accountFlag: false
    };
  },
  components: {},
  created() {
    // this.getCode();
    // this.getLogo();
    let that = this;
    // document.onkeypress = function(e) {
    //   var keycode = document.all ? event.keyCode : e.which;
    //   if (keycode == 13) {
    //     that.loginAccount();
    //     return false;
    //   }
    // };
  },
  mounted() {
    let path = location.href.split("?path=");
    if (path.length > 1) {
      let realpath = path[1].split("&")[0];
      this.$router.push(realpath);
    }
  },

  methods: {
    checkaccountChange() {
      this.accountFlag = true;
    },
    checkaccountChange2() {
      this.accountFlag = false;
    },
    checkPassChange() {
      this.passwordFlag = true;
    },
    checkPassChange2() {
      this.passwordFlag = false;
    },
    loginAccount() {
      this.loading = true;
      login({
        username: this.username,
        password: this.password
      })
        .then(res => {
          if (res.status) {
            // this.$store.commit("saveOpera", asyncRouteMap);
            // this.$store.commit("saveToken",res.data.token.accessToken);
            if(res.data.adminGroup){
              localStorage.setItem("operations", res.data.adminGroup.menu);
            }
            localStorage.setItem("token", res.data.token.accessToken);
            localStorage.setItem("realname", res.data.realname);
            if (res.data.miceId) {
              localStorage.setItem("miceId", res.data.miceId);
            }
            this.$router.push("/home");
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(err => {
          this.$Message.error(err.msg);
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url(../assets/img/bgc.png) no-repeat left center;
  text-align: center;
  background-size: 100% 100%;
  text-align: center;
  height: 100%;
  display: flex;
  .login-logo {
    width: 100%;
    height: 120px;
    font-size: 40px;
    letter-spacing: 8px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
    .f-name {
      font-size: 3.5rem;
      letter-spacing: 17px;
    }
    .s-name {
      font-size: 2rem;
    }
  }
  .center {
    width: 50vw; //设置父级div宽度,input自适应
    min-width: 1000px;
    height: 50vh;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transform: translateY(-20%);
    margin: auto;
  }
  .login-content {
    background: url(../assets/img/bgc.jpg) no-repeat left center;
    text-align: center;
    background-size: 100% 100%;
    text-align: center;
    //background: red;
    margin: 0 auto;
    z-index: 2;
    // position: absolute;
    // top: 0;
    // bottom: 0;
    // right: 0;
    // left: 0;
    // margin: auto;
    display: flex;
    padding: 120px 140px;
    justify-content: flex-end;
    .right {
      flex: 1;
    }
    .left {
      flex: 1;
      // padding: 150px 160px 0 0;
      // margin: 0 0 0 160px;
      padding-left: 40px;
      border-left: 1px #f2f2f2 solid;
      box-sizing: border-box;
      .title {
        color: #4c92f4;
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 70px;
      }
      .ivu-input-prefix {
        color: #4c92f4 !important;
      }
      .prefix {
        display: flex;
        align-items: center;
        .line {
          margin: 5px;
          font-size: 17px;
          color: #999;
        }
        .blueLine {
          margin: 5px;
          font-size: 17px;
          color: #4c92f4;
        }
      }
    }
    p {
      //background: pink;
      margin-bottom: 20px;
      border-bottom: 1px solid #f2f2f2;
    }
    .p-line {
      border-bottom: 1px solid #4c92f4;
    }
    .reg a {
      color: #000;
      margin: 0 20px;
      font-size: 14px;
    }
    .reg a:hover {
      color: #4163d7;
    }
  }
}

.code-img {
  width: 152px;
  height: 40px;
  background: #fff;
  float: right;
  cursor: pointer;
  img {
    width: 100%;
  }
}

footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
  color: #999;
  left: 0;
  font-size: 14px;
  text-align: center;
}
</style>
